<style lang="less" scoped src="../public.less"></style>
<script src="./classroom.js"></script>
<template>
            <div>
                <div class="main-table" style="font-size: 15px;">
                    <Row align="middle">
                         <Col span="2">
                            教室名称:
                        </Col>
                        <Col span="5">
                            <Input  v-model="queryData.name" style="width: 98%"></Input>
                        </Col>
                        <Col span="2">
                        所在区域:
                        </Col>
                        <Col span="5">
                               <Select v-model="queryData.areaId">
                                      <Option v-for="item in areaList" :value="item.id" :key="item.id">{{item.name}}</Option>  
                             </Select>
                        </Col>
                    </Row>
                </div>
                <div style="display: flex;justify-content:space-between">
                     <div>
                    <span @click="showAdd"><Button type="primary" icon="plus">添加</Button></span>
                    <!--  <span @click="showAdd"><Button type="primary" icon="edit">修改</Button></span>
                      <span @click=""><Button type="primary" icon="close">删除</Button></span> -->
                </div>
                <div>
                    <span @click="doQuery"><Button type="primary" icon="android-search">查询</Button></span>
                     <span @click="queryData={name: '',areaId: ''};doQuery();"><Button type="primary" icon="refresh">重置</Button></span>
                </div>
                </div>
               
        <div class="main-table">
            <Table :columns="columns" :data="dataList" :highlight-row="true"
            @on-current-change="whenSelectRow"></Table>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="init" show-total show-elevator></Page>
        </div>
                <Modal
                        title="新增教室"
                        v-model="addVisible"
                        width="60%"
                        :loading="true"
                        :closable="true"
                >
                    <Form :label-width="100" :model="formData" :rules="formDataRules" ref="formData">
                        <Row>
                            <Col span="12">
                            <FormItem label="教室名称:" prop="name" >
                                <Input v-model="formData.name" ></Input>
                            </FormItem>
                            </Col>
                            <Col span="12">
                            <FormItem label="所在楼名:">
                                <Input v-model="formData.bulidName"></Input>
                            </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="12">
                            <FormItem label="所在区域:" prop="areaId" >
                                <Select v-model="formData.areaId">
                                    <Option v-for="item in areaList" :value="item.id" :key="item.id">{{item.name}}</Option>
                                </Select>
                            </FormItem>
                            </Col>
                            <Col span="12">
                            <FormItem label="座位数量:">
                                <InputNumber v-model="formData.setAmount" style="width: 310px;"></InputNumber>
                            </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="12">
                            <FormItem label="设备描述:">
                                <Input type="textarea"  v-model="formData.description"></Input>
                            </FormItem>
                            </Col>
                            <Col span="12">
                            <FormItem label="描述:">
                                <Input type="textarea" v-model="formData.remark"></Input>
                            </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <div slot="footer">
                        <Button type="primary" @click="doSave('formData')">保存</Button>
                        <Button type="ghost" style="margin-left: 8px" @click="addVisible = false">取消</Button>
                    </div>
                </Modal>

         <!--<Modal -->
        <!--v-model="addVisible"  -->
        <!--:title="(formData.id ? '修改' : '新增') + '教室'"-->
        <!--width="60%" >-->
            <!--<div class="modal-div">-->
                    <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="table-row-title"><span style="color: red" >*</span>教室名称：</Col>-->
                    <!--<Col span="8" class="table-row-content">-->
                                 <!--<Input v-model="formData.name"  :readonly="isRead" ></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4" class="table-row-title">所在楼名：</Col>-->
                    <!--<Col span="8" class="table-row-content">-->
                              <!--<Input v-model="formData.buildName"  :readonly="isRead"></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="table-row-title"><span style="color: red">*</span>所在区域：</Col>-->
                    <!--<Col span="8" class="table-row-content">-->
                             <!--<Select v-model="formData.areaId">-->
                                      <!--<Option v-for="item in areaList" :value="item.id" :key="item.id">{{item.name}}</Option>  -->
                             <!--</Select>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">-->
                    <!--<Col span="4" class="table-row-title">座位数量：</Col>-->
                    <!--<Col span="8" class="table-row-content">-->
                                    <!--<Input v-model="formData.setAmount" ></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4" class="table-row-title"><span style="color: red">*</span>是否启用：</Col>-->
                    <!--<Col span="8" class="table-row-content">-->
                             <!--<Select v-model="formData.status">-->
                                     <!--<Option :value="1">是</Option>-->
                                    <!--<Option :value="2">否</Option>-->
                             <!--</Select>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">  -->
                    <!--<Col span="4" class="table-row-title">设备描述：</Col>-->
                    <!--<Col span="20" class="table-row-content">-->
                                <!--<Input type="textarea" :rows="2" v-model="formData.description" :clearable="!isRead" :readonly="isRead"></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row class="table-Row">  -->
                    <!--<Col span="4" class="table-row-title">描述：</Col>-->
                    <!--<Col span="20" class="table-row-content">-->
                                <!--<Input type="textarea" :rows="2" v-model="formData.remark" :clearable="!isRead" :readonly="isRead"></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
            <!--</div>-->
                    <!--<div slot="footer">-->
                            <!--<Button type="primary" @click="doSave">保存</Button>-->
                        <!--<Button type="ghost" style="margin-left: 8px" @click="addVisible = false">取消</Button>-->
                    <!--</div>-->
        <!--</Modal>-->
    </div>
</template>

